<script lang="ts" setup>
import {
  ElButton,
  ElInput,
  ElTable,
  ElSwitch,
  ElPagination,
  ElSelect,
  ElOption,
  ElMessageBox,
  ElRow,
  ElCol,
} from "element-plus";
import { Plus } from "@vben/icons";
import { ref } from "vue";
import addEdit from "./addEdit.vue";
import timeUse from "./time.vue"
const name = ref("");
const status = ref("");

const tableData = ref([
  {
    id: 1,
    status: false,
    name: "角色1",
  },
]);
const statusOptions = [
  {
    value: "1",
    label: "全部",
  },
  {
    value: "2",
    label: "已启用",
  },
  {
    value: "3",
    label: "已停用",
  },
  {
    value: "4",
    label: "已过期",
  },
];
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const search = () => {
  console.log(name.value);
};

const resetForm = () => {
  name.value = "";
  status.value = "";
  currentPage.value = 1;
};
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
const editItem = (row) => {
  dialogVisible.value.editDialog(row);
};

const delItem = (row) => {
  ElMessageBox.confirm("确定要删除该角色吗?", {
    type: "warning",
    center: true,
  })
    .then(() => {
      // ElMessage({
      //   type: "success",
      //   message: "删除成功",
      // });
    })
    .catch(() => {
      // catch error
    });
};

const dialogVisible = ref();
const addItem = () => {
  dialogVisible.value.addDialog();
};
const stopStatus = (row) => {
  ElMessageBox.confirm("确定要停用该账号吗?", {
    type: "warning",
    center: true,
  })
    .then(() => {
      // ElMessage({
      //   type: "success",
      //   message: "删除成功",
      // });
    })
    .catch(() => {
      // catch error
    });
};
const selectTime = ref()
const updateStatus = (row) => {
  selectTime.value.openDialog();
};
</script>

<template>
  <div class="p-2">
    <div class="search">
      <ElRow>
        <ElCol :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
          <div class="searchForm">
            <div>
              <span>商户名称：</span>
              <ElInput
                v-model="name"
                style="width: 240px; margin-right: 16px"
                placeholder="请输入商户名称"
              />
            </div>
            <div class="searchBtn">
              <span>状态：</span>
              <ElSelect
                v-model="status"
                style="width: 180px"
                placeholder="请选择状态"
              >
                <ElOption
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </div>
            <div class="searchBtn">
              <ElButton
                type="primary"
                style="margin-left: 10px"
                @click="search()"
                >查询</ElButton
              >
              <ElButton @click="resetForm()">重置</ElButton>
            </div>
          </div>
        </ElCol>
        <ElCol :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="searchCol">
          <ElButton type="primary" style="float: right" @click="addItem"
            >添加<Plus class="size-5"
          /></ElButton>
        </ElCol>
      </ElRow>
    </div>
    <div class="tablePage">
      <div style="padding: 0px 24px 0px 16px">
        <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
          <ElTable.TableColumn prop="name" label="商户名称" align="center" />
          <ElTable.TableColumn prop="sort" label="联系人" align="center" />
          <ElTable.TableColumn prop="name" label="联系人电话" align="center" />
          <ElTable.TableColumn prop="sort" label="创建时间" align="center" />
          <ElTable.TableColumn prop="name" label="到期时间" align="center" />
          <ElTable.TableColumn prop="status" label="状态" align="center">
            <template #default="scope">
              <span v-if="scope.row.status == 1">启用</span>
              <span v-else>禁用</span>
            </template>
          </ElTable.TableColumn>
          <ElTable.TableColumn fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="editItem(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.status == 1"
                link
                type="primary"
                size="small"
                @click="stopStatus(scope.row)"
                >停用</el-button
              >
              <el-button
                v-else
                link
                type="primary"
                size="small"
                @click="updateStatus(scope.row)"
                >启用</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="delItem(scope.row)"
                >删除</el-button
              >
            </template>
          </ElTable.TableColumn>
        </ElTable>
      </div>
      <div class="pagination">
        <ElPagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <addEdit ref="dialogVisible" />
    <timeUse ref="selectTime" />
  </div>
</template>
<style lang="css" scoped>
.search {
  padding: 16px 24px 20px 16px;
  background: #fff;
}
.tablePage {
  height: calc(100vh - 172px);
  background: #fff;
}
.pagination {
  width: 100%;
  padding: 20px 24px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
:deep(.el-table th) {
  background: #f5f7fa !important;
}
.searchForm {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
}
.el-row {
  display: flex;
  place-content: center center;
}
@media (max-width: 950px) {
  .searchForm {
    flex-direction: column;
    align-items: flex-start;
  }

  .searchBtn {
    margin-top: 10px;
  }
}
</style>